<template>
  <el-space fill style="width: 100%">
    <el-card>
      <template #header>
        <div class="card-header">get属性</div>
      </template>
      <el-button @click="changeUser">修改用户信息</el-button>

      <el-divider>用户信息</el-divider>
      {{ user.name || '---' }} - {{ user.age }}

      <el-divider>定义时就获取</el-divider>
      {{ obj1.userName || '---' }}

      <el-divider>使用时才获取</el-divider>
      {{ obj2.userName || '---' }}
    </el-card>
    <el-card>
      <template #header>css 响应式变量</template>
      <div class="css-var">
        <p>测试样式</p>
        <el-divider border-style="dashed" />
        <button class="btn" :style="styleVars">动态按钮</button>
      </div>
    </el-card>
  </el-space>
</template>

<script setup>
import { ref, computed } from 'vue'
const user = ref({
  name: '',
  age: 0
})
function changeUser() {
  user.value.name = 'TOM'
  user.value.age = 18
}
const obj1 = ref({
  userName: user.value.name,
  id: 1
})
const obj2 = ref({
  get userName() {
    return user.value.name
  },
  id: 2
})

// css 响应式变量
const theme = ref({
  color: 'red'
})

const themeColor = ref('#409EFF')
// 动态极端阴影颜色（举例）
const shadowColor = computed(() => {
  return themeColor.value.replace('#', 'rgba(0, 0, 0, 0.15)')
})
// 集中管理样式变量
const styleVars = computed(() => ({
  '--btn-bg': themeColor.value,
  '--btn-color': '#fff',
  '--btn-shadow': shadowColor.value
}))
const cssList = ref([
  { id: 1, status: 'success' },
  { id: 2, status: 'error' }
])
</script>

<style lang="scss" scoped>
.css-var {
  p {
    color: v-bind('theme.color');
  }
  .btn {
    background-color: var(--btn-bg);
    color: var(--btn-color);
    box-shadow: 0 4px 10px var(--btn-shadow);
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out;
  }
}
</style>
